<template>
  <div class="app">
    <h2 class="title">猫猫狗狗大作战</h2>
    <!--导航above-->
    <div class="above">
      <RouterLink to="/intro" active-class="active">工作室介绍</RouterLink>
      <RouterLink to="/show" active-class="active">爱宠风范</RouterLink>
      <RouterLink to="/contact" active-class="active">联系我们</RouterLink>
    </div>
    <!--展示区-->
    <RouterView class="main-content"></RouterView>
  </div>
</template>

<script lang="ts" setup name="App">
import { RouterView, RouterLink } from "vue-router";
</script>

<style>
.app {
  background-color: #fcc87a;
}
/* App */
.title {
  text-align: center;
  word-spacing: 5px;
  margin: 30px 0;
  height: 70px;
  line-height: 70px;
  background-image: linear-gradient(45deg, rgb(248, 222, 126), white);
  border-radius: 10px;
  box-shadow: 0 0 2px;
  font-size: 30px;
}
.above {
  display: flex;
  justify-content: space-around;
  margin: 0 100px;
}
.above a {
  display: block;
  text-align: center;
  width: 130px;
  height: 40px;
  line-height: 40px;
  border-radius: 10px;
  background-color: rgb(251, 223, 123);
  text-decoration: none;
  color: black;
  font-size: 18px;
  letter-spacing: 5px;
}
.above a.active {
  background-color: #fad338;
  color: #fff9de;
  font-weight: 900;
  text-shadow: 0 0 1px black;
  font-family: 微软雅黑;
}
.main-content {
  background-color: rgb(250, 236, 197);
  margin: 0 auto;
  margin-top: 30px;
  border-radius: 10px;
  width: 90%;
  height: 650px;
  border: 5px solid rgb(248, 173, 12);
}
</style>
